<template>
	<view class="main">
		<view class="mtops">
		<view class="title">
			我的头像
		</view>
		<u-avatar size="30" :src="userInfo.portrait" shape="circle"></u-avatar>
	<u-upload	
		width="100"
		height="100"
		accept="image"
		:maxCount="1"
		@afterRead="afterRead"		
	>
	<view class="btn">
		选择图片
	</view>
	
	</u-upload>	
		
	</view>
	
	<view class="card-d" >
		<image :src="portrait" alt="" mode="aspectFill" class="img"></image>
	</view>
	
		<view class="submit">
			<u-button color="#666666" shape="circle" @click="back">取消</u-button>
			<u-button v-if="up" :loading="loading" color="#EFBE62" shape="circle" @click="crop">确定</u-button>
		</view>
	</view>
</template>

<script>
	import {mixin} from '@/Mixins/mixin.js'
	import { mapState, mapMutations } from 'vuex'
	export default {
		mixins:[mixin],
		data() {
			return {
				loading:false,
				form:{
					username :'',//昵称
				},
				portrait:'',
				up:false,
				rules: {
					username : [
						{
							required: true,
							message: '请输入昵称',
							trigger: ['blur', 'change']
						}
					],
					
				}
			}
		},
		onShow() {
			if(this.userInfo.portrait){
			this.portrait = this.userInfo.portrait
			}
		},
		onLoad() {
			
		},
		computed: {
			...mapState(['userInfo','token'])
		},
		methods: {
			//上传头像
			 afterRead(event) {
				console.log('[选择的图片]',event.file)
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = event.file
				this.up=true
				// const result = await this.uploadFilePromise(lists.url)
				// console.log('[图片上传成功]',result)
				this.portrait=lists.url
				console.log(this.portrait);
				
			},
		 	uploadFilePromise(url) {
				// console.log(url);
				// let data = await this.$http({
				// 	url:this.$api.upimgBase,
				// 	method: 'POST',
				// 	hideLoading: true,
				// 	data:{file:url}
				// })
				// console.log(data);
				
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://v2.think-er.vip/' + this.$api.upimg,
						filePath: url,
						name: 'file',
						success: (res) => {
							console.log('[上传头像]',res)
							uni.hideLoading();
							let result = JSON.parse(res.data).msg							
							if(result){
								this.setMemberInfo({portrait:result})
							}
						},
						fail:(err)=>{
							uni.$u.toast('头像上传失败');
						}
					});
				})
			},
			 crop(){
				uni.showLoading({
				  title: '正在上传头像'
				})
				 this.uploadFilePromise(this.portrait)
			  // 通过组件定义的ref调用cropper方法，返回一个promise对象
			  // this.$refs.cropper.crop().then(([err,res])=>{
				 //  console.log("错误",err,res)
					// 	if(!err){
					// 		 this.uploadFilePromise(res.tempFilePath)
					// 		// console.log(res)
						
					// 	}else{
					// 		console.log("错误",err)
					// 	}
					// })
			},
			
			submit() {
				this.$refs.uForm.validate().then(res => {
					this.loading = true
					this.setMemberInfo({nickname:this.form.username})
					setTimeout(()=> {this.back()}, 1000);
					
					
				}).catch(errors => {
					// uni.$u.toast('校验失败')
				})
			},
			
			back(){
				uni.$u.route({
					type:'redirect',
					url: '/pages/UserInfo/index'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		min-height: calc(100vh - 104rpx);
		padding: 12rpx 30rpx;
		box-sizing: border-box;
		background-color: $nft-bg-color;
		::v-deep .u-form-item__body{
			padding: 30rpx 0;
		}.mtops{
			display: flex;
			width: 100%;
			justify-content: space-between;
			align-items: center;
			margin: 20rpx auto 30rpx;
		}
		.title{
			color: #333333;
			margin-right: 10rpx;
		}
			
		.btn{
			border-radius: 10rpx;
			padding: 10rpx;
			font-size: 22rpx;
			color: #FFFFFF;
			background: #EFBE62;
			margin-left: 20rpx;
		}
		.card-c{
			height: 60vh;
			}
			.card-d{
				height: 60vh;
				width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			.img{
				width: 600rpx;
				height:600rpx;
				border-radius: 100%;
			}
			
		}
		.submit{
			margin-top: 60rpx;
			display: flex;
			align-items: center;
			justify-content: space-between
			::v-deep button{
				width: 332rpx;
				height: 92rpx;
				&:nth-child(1){
					color: #FFFFFF!important;
				}
				&:nth-child(2){
					color: #333333!important;
				}
			}
		}
		
	}
	
	
</style>
